<template>
  <el-table class="vp-raw" :data="tableData" @cell-click="showUnitInput">
    <el-table-column label="标题1" prop="data1"></el-table-column>
    <el-table-column label="数据2" prop="data2"></el-table-column>
    <el-table-column label="数据3" prop="data3">
      <template #default="{ row, column }">
        <el-input
          v-if="tableRowEditId === row.id && tableColumnEditIndex === column.no"
          v-model="row.data3"
          @keyup.enter="blurValueInput(row, column)"
        />
        <span v-else>{{ row.data3 }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from "vue";

const tableData = ref([
  { id: 1, data1: "标题1", data2: "数据1", data3: "数据1" },
  { id: 2, data1: "标题2", data2: "数据2", data3: "数据2" },
  { id: 3, data1: "标题3", data2: "数据3", data3: "数据3" },
]);

const tableRowEditId = ref(null);
const tableColumnEditIndex = ref(null);

const showUnitInput = (row, column) => {
  tableRowEditId.value = row.id;
  tableColumnEditIndex.value = column.no;
};

const blurValueInput = (row, column) => {
  tableRowEditId.value = null;
  tableColumnEditIndex.value = null;
  console.log(row.data3, "blurValueInput");
  // 在此处调接口传数据
};
</script>
